Process Book
Liam Shalon | liamshalon@wustl.edu | 457508
Ben Siderowf | bsiderowf@wustl.edu | 465346
https://csex57.github.io/rtnaturaldisasters/
With more and more news stories about various natural disasters across the United States, it can be difficult to know whether a particular event is a big deal, or whether it’s just being overexaggerated for clicks. Our goal is to present a succinct, vivid and truthful visualization that shows the natural disasters from recent years, as well as the most recent real-time data so that users can draw informed conclusions about current-day disasters, and learn how they compare to similar events of the past. Our hope is that the analysis leads to more a accurate view of the world, which will help promote better decision making, and policies to address these crises into the future.
We would like to learn:
The USGS provides a map of real-time earthquakes:
DroughtMonitor provides a map of current drought conditions across the US
One major question we came across to answer with respect to creating our visualization was how to best convey many thousands of data points to the user. Our dataset has ~1,000,000 data points in total. We obviously can’t show all of these to the user at once -- not only would it be impossible to comprehend, but no reasonable web browser would be able to handle that many SVG elements. We considered several different methods for condensing the information shown, but our final solution was to select the 1000 points with the largest magnitude for the user’s selected time range and draw those to the map.
Data Processing
One of our initial concerns about our project was about the size of the datasets we would be loading. For example, some initial research showed that one month of earthquake data might take as much as 10 MB of space, which could create problems for our goal of showing several years of historical data in our visualization. However, through several data filtering techniques and by storing the data in a more compact format, we were able to reduce the total data size to a manageable level.
By the end of it, we still ran into many problems due to the sheer size of the dataset. It created issues when rendering the circles on the map since it’d take a while to render tens of thousands of circles on the map. This informed our design because it meant that if we wanted to allow scrubbing, we had to project only some of the circles and not all of them - hence, we ordered the data and picked the 1000 most significant data points.
General idea:
Filtered & Categorized:
Combine & Refine:
Question: We want to present the relationship between area and natural disasters to help customers realize their area related problems and prepare for potential disasters in risky months. The problem is that some regions might contain multiple natural disasters so colors will be too blurry to distinguish disasters’ kind.
We have three charts that we want to put in our final visualization after filtered out from proposal visualized charts. They are a geographical map, a pie chart and a dynamic line chart.
Explanation: Brushed-area. As mentioned in the layout section, we are going to apply a brush feature on the dynamic line chart to provide details.
Final Design
Our must-have features:
Optional features:
Reflection: our final version was very close to what we had originally proposed. Very happy about how it turned out and we feel that the overall look and usage of the product is on par with what we expected and desired.
Over the course of our implementation, we changed our goals slightly. Our original vision for this project was to focus mainly on a real-time visualization of conditions across the US, but we ultimately decided to focus on creating a more robust visualization of historic data (across a 5-year period) instead.
Tooltips were implemented by having a callback on each SVG element with the provided metadata. Then we simply relocated a rectangle at the mouse hover, changed the opacity of the rectangle to 100%, and the text within it to match the element that the user was scrolling over.
The map itself is implemented as an SVG element with added panning and zooming from the D3 library.
The histogram was a simple version of adding multiple rectangles to a view and adding scrubbing on top of the element. Each data type on the map had a filter function that allowed for the data to easily filter by two dates and then we fed the filtered data into the map projection file where there were functions that converted those data points to dots or regions on the map.
The real time data button was a similar functionality that simply changed the underneath data to whatever was pulled in real time.
All in all, we feel that our project met expectations by showing a temporal view of natural disasters but also an opportunity to analyze deeper specific time periods. We learned a lot about how to manage large data sources and handle various latencies. We feel also that the one big way we could improve the design is by showing perhaps an animation of how the natural disasters have risen and gone out - and allow users to toggle between that view or not.
